<template>
  <div class="add-group-page">
    <el-row>
      <el-col :span="8">
        <el-card class="groups-list">
          <el-button icon="back" @click="Groups">返回</el-button>
          <div slot="header" class="clearfix">
            <span>群组列表</span>
            <el-button type="primary" @click="createGroupDialogVisible = true">创建群组</el-button>
          </div>
          <el-menu class="el-menu-vertical-demo">
            <el-menu-item v-for="group in groups" :key="group.id" @click="viewGroupDetails(group)">
              <span class="group-name">{{ group.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="group-details" v-if="currentGroup">
          <div slot="header" class="clearfix">
            <span>{{ currentGroup.name }}</span>
          </div>
          <el-form :model="currentGroup">
            <el-form-item label="群组人数">
              <span>{{ currentGroup.members.length }}</span>
            </el-form-item>
            <el-form-item label="群组名称">
              <span>{{ currentGroup.name }}</span>
            </el-form-item>
            <el-form-item label="介绍">
              <span>{{ currentGroup.description }}</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="joinGroup">加入群组</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增群组的对话框 -->
    <el-dialog :visible.sync="createGroupDialogVisible" title="新增群组">
      <el-form :model="newGroup" ref="newGroupForm">
        <el-form-item label="群组名称">
          <el-input v-model="newGroup.name" />
        </el-form-item>
        <el-form-item label="群组描述">
          <el-input v-model="newGroup.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createGroupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createGroup">创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        { id: 1, name: '篮球爱好者', members: 10, description: '喜欢打篮球的小伙伴们' },
        { id: 2, name: '足球俱乐部', members: 15, description: '足球迷们聚集地' },
        { id: 3, name: '羽毛球协会', members: 8, description: '羽毛球爱好者的家' },
      ],
      currentGroup: null,
      createGroupDialogVisible: false,
      newGroup: {
        name: '',
        description: ''
      }
    };
  },
  methods: {
    viewGroupDetails(group) {
      this.currentGroup = group;
    },
    createGroup() {
      if (this.newGroup.name && this.newGroup.description) {
        const newGroup = {
          id: this.groups.length + 1,
          name: this.newGroup.name,
          description: this.newGroup.description,
          members: 0
        };
        this.groups.push(newGroup);
        this.createGroupDialogVisible = false;
        this.newGroup.name = '';
        this.newGroup.description = '';
      } else {
        this.$message.error('请填写完整的群组信息');
      }
    },
    joinGroup() {
      this.currentGroup.members++;
    },
    Groups() {
      this.$router.push('/social/groups');
    }
  },
};
</script>

<style scoped>
.add-group-page {
  padding: 20px;
}

.groups-list {
  height: 100%;
  overflow-y: auto;
}

.group-name {
  margin-left: 10px;
}

.group-details {
  height: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
